<template>
	<view class="dialogue">
		<titleName :name="name" :backShow="true"></titleName>
		<view class="search-wrap">
			<view class="ipt-wrap">
				<input type="text" placeholder="搜索内容" placeholder-class="ph-color" />
				<button class="btn">查询</button>
			</view>
		</view>
		<noData v-if="dataList.length==0" />
		<view class="list" v-if="dataList.length>0">
			<view class="item" v-for="item in dataList" :key="item.id" @click="jumpDetail(item.enterpriseid)">
				<view class="img-wrap">
					<image :src="resourceUrl+'zixun-user-icon.png'" mode=""></image>
					<view class="msg-num">1</view>
				</view>
				<view class="right-wrap">
					<view class="name-time">
						<view class="name">{{item.enterprisename}}</view>
						<view class="time">{{item.committime}}</view>
					</view>
					<view class="content">
						{{item.content}}
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup>
	import titleName from '../../components/titleName.vue'
	import http from '../../request/index.js'
	import noData from '../../components/noDataShow.vue'
	import {
		resourceUrl
	} from '../../request/config'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		ref
	} from 'vue'
	let dataList = ref([])
	let name = "环保咨询"
	onShow(() => {
		http({
			url: "/greenChatRecord/listChatSession"
		}).then((res) => {
			if (res.code == 0) {
				dataList.value = res.data.list
			}
		})
	})
	let jumpDetail = (id) => {
		uni.navigateTo({
			url: `/homePageOther/dialoguedetail/index?enterpriseid=${id}`
		})
	}
</script>

<style lang="scss" scoped>
	.dialogue {
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		:deep(.ph-color) {
			font-family: Source Han Sans CN;
			font-weight: 400;
			font-size: 25rpx;
			color: #ABABBB;

		}

		.list {
			padding: 0 28upx 0 28upx;
			overflow: scroll;
			height: calc(100vh - 160upx - 131upx);

			.item {
				display: flex;
				align-items: center;
				height: 181upx;
				padding: 50upx 0 38upx 0;
				width: 100%;
				border-bottom: 1rpx solid #EDF2F2;

				.img-wrap {
					width: 92upx;
					height: 92upx;
					position: relative;

					image {
						width: 92upx;
						height: 92upx;
					}

					.msg-num {
						width: 36rpx;
						height: 36rpx;
						background: #FA5F4D;
						border-radius: 50%;
						position: absolute;
						top: -6upx;
						right: -6upx;
						line-height: 36rpx;
						text-align: center;
						font-family: Microsoft YaHei;
						font-weight: 400;
						font-size: 25rpx;
						color: #FFFFFF;

					}


				}


				.right-wrap {
					display: flex;
					flex-direction: column;
					margin-left: 22upx;
					height: 92upx;
					justify-content: space-between;
					padding-bottom: 9upx;
					width: 100%;

					.content {

						font-family: Microsoft YaHei;
						font-weight: 400;
						font-size: 25rpx;
						color: #96989F;

					}

					.name-time {
						display: flex;
						justify-content: space-between;
						width: 100%;

						.name {
							width: 276rpx;
							height: 34rpx;
							flex-grow:1;
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-size: 35rpx;
							color: #34363A;
							line-height: 33rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.time {
							
							width: 244rpx;
							height: 23rpx;
							font-family: Microsoft YaHei;
							font-weight: 400;
							font-size: 24rpx;
							color: #96989F;
							line-height: 33rpx;
						}
					}
				}


			}
		}

		.search-wrap {
			width: 750rpx;
			height: 131rpx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;

			.ipt-wrap {
				display: flex;
				width: 690rpx;
				height: 75rpx;
				background: #F7F7FE;
				border-radius: 38rpx;
				padding-left: 34upx;
				align-items: center;

				input {
					flex-grow: 1;
					padding-right: 100upx;
				}



				.btn {
					flex-shrink: 0;
					width: 112rpx;
					height: 74rpx;
					background: #0874FA;
					border-radius: 14rpx;
					line-height: 74upx;
					font-weight: 500;
					font-size: 31rpx;
					color: #FFFFFF;
				}
			}

		}



	}
</style>